/*
内部通讯-站内通知22
*/

<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getNotice" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delNotice" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="title">
                <el-input
                  placeholder="搜索:站内通知标题"
                  v-model="search.title"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="onTheTop">
                <el-select
                  clearable
                  v-model="search.onTheTop"
                  placeholder="是否置顶"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间" prop="date">
                <el-date-picker
                  v-model="search.date"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="">
                <el-button type="primary" round @click="searchPage">搜索</el-button>
                <el-button
                  type="warning"
                  round
                  @click="$refs.search.resetFields()"
                >重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column label="站内通知标题"  prop="noticeTitle" >
            </el-table-column>
            <el-table-column label="通知范围"  prop="noticeRange" >
              <template slot-scope="scope">
                {{scope.row.noticeRange.join(',')}}
              </template>
            </el-table-column>
            <el-table-column label="发布人"  prop="createUser" >
            </el-table-column>
            <el-table-column label="发布时间" sortable prop="createTime" align="center">
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 添加发货渠道信息 -->
    <el-dialog
      v-dialog-drag
      :title="title + '站内通知'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="restForm"
      width="1000px"
    >
      <el-form
        size="small"
        :model="baseForm"
        label-position="left"
        label-width="120px"
        ref="baseForm"
        :rules="baseFormRules"
      >
        <el-form-item label="通知标题" prop="noticeTitle">
          <el-input v-model="baseForm.noticeTitle"></el-input>
        </el-form-item>
        <el-form-item prop="noticeRange" label="所属门店">
          <el-select
            ref="select"
            multiple
            filterable
            style="width: 100%"
            v-model="baseForm.noticeRange"
            placeholder="请选择所属门店">
            <el-option
              v-for="item in stores"
              :key="item.id"
              :value="item.name"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="noticeContent" label="内容详情">
          <editor ref="editor"></editor>
        </el-form-item>
        <el-row :gutter="20" style="margin-top:30px">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-checkbox v-model="baseForm.onTheTop">是否置顶</el-checkbox>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      v-dialog-drag
      title="查看通知"
      :visible.sync="dialogFormVisible1"
      :close-on-click-modal="false"
      @close="restForm"
      width="1000px"
    >
      <el-tabs type="card">
        <el-tab-pane v-for="item in multipleSelection" :key="item.id" :label="item.noticeTitle">
          <div style="text-align: center">
            <p>{{item.noticeTitle}}</p>
            <p v-html="item.noticeContent"></p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>

let search = {
  //搜索:通知标题
  info:'',
  //是否置顶
  onTheTop:'',
  //时间范围
  date:[]
};

//发货渠道基本信息表单
let baseForm = {
  id:'',
  //通知标题
  noticeTitle:'',
  //通知范围
  noticeRange:[],
  //内容详情
  noticeContent:'',
};
import myHeader from "@/components/pageHEader/pageHeader";
import editor from '../parts/components/editor'
import { mapGetters } from "vuex";

import {
  getNotice,
  addNotice,
  delNotice,
  modNotice,
  viewNotice
} from "@/api/communication/notice";

export default {
  name: "notice",
  components: {
    myHeader,
    editor
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      //对话框
      dialogFormVisible: false,
      dialogFormVisible1: false,
      title: "添加",
      baseForm:this.cloneObj(baseForm),
      baseFormRules:{
        //所属门店
        noticeRange: [this.$RegExp.required("通知范围不能为空")],
        //标题
        noticeTitle:[this.$RegExp.required()],
        //内容详情
        noticeContent:[this.$RegExp.required()],
      },
    };
  },
  computed: {
    ...mapGetters(["stores","roles"]),
  },
  created() {},
  mounted() {
    this.getNotice();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getNotice()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getNotice()
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    //添加、修改
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        this.title = "修改";
        this.$nextTick(()=>{
          this.$refs.editor.setContent(row.noticeContent)
        })
        //将数据复制给form
        this.handleModform(row, this.baseForm);
        this.baseForm.id = row.id;
        this.dialogFormVisible = true;
      } else {
        this.baseForm = this.cloneObj(baseForm);
        this.$nextTick(()=>{
          this.$refs.editor.setContent('')
        })
        this.title = "添加";
        this.dialogFormVisible = true;
      }
    },
    //刷新
    getNotice() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        info: this.search.info,
        isTop:this.search.isTop,
        ...this.handleDate(this.search.date)
      };
      getNotice(query).then((resp) => {
        this.data =  resp.data.records;
        this.total = resp.data.total;
      });
    },
    //搜索
    searchPage(){
      this.currentPage = 1
      this.pageSize = 20
      this.getNotice()
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //确定
    submit() {
      //赋值过后不更改可能会导致没值
      this.baseForm.noticeContent = this.$refs.editor.getContent() || this.baseForm.noticeContent
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.baseForm
          );
          let request;
          if (this.title == "添加") {
            request = addNotice(submit)
          } else {
            request = modNotice(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getNotice();
          });
        }
      });
    },
    //查看
    view() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.dialogFormVisible1 = true
    },
    //删除
    delNotice() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delNotice(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getNotice();
          }
        );
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.tdItem {
  line-height: 25px;
}
</style>


